<template>
  <div class="container">
    <!-- 朦胧块1 -->
    <div class="blurred-box-left"></div>
    <div class="blurred-box-right"></div>
    <div class="form">
      <div class="header">
        <image
          class="logo"
          src="/static/image/avatarUser.png"
          mode="withFix"
        ></image>
        <div class="title">欢迎来到果恋科圃系统</div>
      </div>
      <div class="main">
        <div class="phone-input">
          <van-icon class="phone-icon" name="phone-o" />
          <input
            type="number"
            class="ipt"
            v-model="phoneNumber"
            placeholder="请输入会员手机号"
            placeholder-class="pcs"
          />
        </div>
      </div>
      <div class="footer">
        <div class="title-tips">
          注：本应用仅对平台会员开放使用，请使用会员录入的手机号登录
        </div>
        <button class="btn login-btn" @click="phoneLogin">登录</button>
        <div class="login-protocol">
          <van-checkbox
            :value="isCheck"
            checked-color="#87A2FF"
            @change="handlerCheckChange(!isCheck)"
          ></van-checkbox>
          <span>我已阅读并同意</span>
          <span class="service-protocol" @click="lookServiceProtocol"
            >《 服务协议 》</span
          >
          <span>和</span>
          <span class="privacy-agreement" @click="lookPrivacyAgreement"
            >《 隐私条款 》</span
          >
        </div>
        <div class="quick">
          <span class="quick-title">——————— 其它登录方式 ———————</span>
          <template v-if="isCheck">
            <button
              open-type="getPhoneNumber"
              @getphonenumber="getPhoneNumber"
              class="quick-box"
            >
              <image
                class="quick-img"
                src="/static/image/quick.png"
                mode="withFix"
              ></image>
              <span class="quick-text">快捷登录</span>
            </button>
          </template>
          <template v-else>
            <div class="quick-box" @click="quickLogin">
              <image
                class="quick-img"
                src="/static/image/quick.png"
                mode="withFix"
              ></image>
              <span class="quick-text">快捷登录</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
  <!-- 手机号登录授权弹框 -->
  <van-overlay
    :show="isPhoneCheckShow"
    custom-style="background-color:rgba(0,0,0,.3)"
  >
    <div class="wrapper modal">
      <div class="wrapper-title">登录提示</div>
      <div class="wrapper-main">
        <span>是否同意登录果恋科圃系统？</span>
      </div>
      <div class="wrapper-footer">
        <button class="btn" @click="handlerPhoneNotAgree">不同意</button>
        <button class="btn" @click="handlerPhoneAgree">同意</button>
      </div>
    </div>
  </van-overlay>
  <!-- 快捷登录授权弹框 -->
  <van-overlay
    :show="isQuickCheckShow"
    custom-style="background-color:rgba(0,0,0,.3)"
  >
    <div class="wrapper modal">
      <div class="wrapper-title">请详细阅读并同意</div>
      <div class="wrapper-main">
        <span class="service-protocol" @click="lookServiceProtocol"
          >《 服务协议 》</span
        >
        和
        <span class="privacy-agreement" @click="lookPrivacyAgreement"
          >《 隐私条款 》</span
        >
      </div>
      <div class="wrapper-footer">
        <button class="btn" @click="notAgree">不同意</button>
        <button
          class="btn"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          登录
        </button>
      </div>
    </div>
  </van-overlay>
  <!-- 拒绝授权 -->
  <van-overlay
    :show="isAuthorize"
    custom-style="background-color:rgba(0,0,0,.3)"
  >
    <div class="wrapper modal">
      <div class="wrapper-title">授权提示</div>
      <div class="wrapper-main">您已拒绝授权，请重新点击并授权</div>
      <div class="wrapper-footer">
        <button class="btn" @click="handlerAuthorizeSure">确定</button>
      </div>
    </div>
  </van-overlay>
</template>

<script setup>
import { ref } from 'vue'
import { validateMobileOrEmpty } from '../../utils/rules'
import { logIn } from '../../api/index'
import { setToken, getToken } from '../../utils/auth'
const phoneNumber = ref('')
//是否同意条款
const isCheck = ref(false)

//拒绝授权弹框
const isAuthorize = ref(false)

const handlerCheckChange = (val) => {
  isCheck.value = val
}
const lookServiceProtocol = () => {
  uni.navigateTo({
    url: '/modules/explain/pages/serviceAgreement',
  })
}
const lookPrivacyAgreement = () => {
  uni.navigateTo({
    url: '/modules/explain/pages/privacyAgreement',
  })
}

//手机号登录授权协议弹框
const isPhoneCheckShow = ref(false)
// 登录
const phoneLogin = () => {
  if (isCheck.value) {
    const res = validateMobileOrEmpty(phoneNumber.value.trim())
    if (res) {
      isPhoneCheckShow.value = true
    }
  } else {
    uni.showToast({
      title: '请同意服务协议和隐私条款',
      icon: 'none',
    })
  }
}
// 获取手机号
const getPhoneNumber = (e) => {
  const { code, errMsg } = e.detail
  if (errMsg === 'getPhoneNumber:ok') {
    // code获取成功
    resLogIn(code)
  } else {
    //取消或者获取失败
    isQuickCheckShow.value = false
    isAuthorize.value = true
  }
}
//  登录
const resLogIn = async (code) => {
  try {
    let res = await logIn(code)
    if (res.data.token) {
      setToken(res.data.token)
      getUserInfo()
      uni.switchTab({
        url: '/pages/index/index',
      })
      uni.showToast({
        title: '登录成功',
        icon: 'none',
      })
    } else {
      uni.showToast({
        title: 'token为空',
        icon: 'none',
      })
    }
  } catch (error) {
    console.error(error)
  } finally {
    isQuickCheckShow.value = false
  }
}
// 获取个人信息
const getUserInfo = () => {
  const token = getToken()
  console.log('>>..token', token)
}
//普通手机号登录
const handlerPhoneNotAgree = () => {
  isPhoneCheckShow.value = false
}
const handlerPhoneAgree = () => {
  uni.showToast({
    title: '登录成功',
    icon: 'none',
  })
  isPhoneCheckShow.value = false
}
//快捷登录授权协议弹框
const isQuickCheckShow = ref(false)
const quickLogin = () => {
  console.log('点击了')
  if (isCheck.value) {
  } else {
    isQuickCheckShow.value = true
  }
}
//快捷登录
const notAgree = () => {
  isQuickCheckShow.value = false
}
const handlerAuthorizeSure = () => {
  isAuthorize.value = false
}
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  background-color: $uni-bg-color;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .blurred-box-left {
    width: 600rpx;
    height: 600rpx;
    box-shadow: rgba(135, 162, 255, 0.56) 0px 362rpx 240rpx 144rpx;
    background: rgba(135, 162, 255, 0.1);
    border-radius: 50%;
    transform: rotate(-90deg);
    position: absolute;
    left: -800rpx;
    top: -100rpx;
  }

  .blurred-box-right {
    width: 600rpx;
    height: 600rpx;
    box-shadow: rgba(196, 225, 246, 0.56) 0px 362rpx 200rpx 124rpx;
    background: rgba(196, 225, 246, 0.1);
    border-radius: 50%;
    transform: rotate(90deg);
    position: absolute;
    right: -800rpx;
    top: 34%;
  }

  .form {
    width: $uni-width-lg;
    height: 80vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;

    .header {
      display: flex;
      align-items: center;
      flex-direction: column;

      .logo {
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
      }

      .title {
        font-weight: bold;
        font-size: $uni-font-size-lg;
        color: $uni-text-color-theme;
        margin-top: $uni-spacing-row-lg;
      }
    }

    .main {
      width: 600rpx;
      padding: 20rpx;
      background-color: white;
      z-index: 1;
      box-sizing: border-box;
      margin-top: $uni-space-default-20;

      .phone-input {
        display: flex;
        align-items: center;

        .phone-icon {
          font-size: 40rpx;
        }

        .ipt {
          width: 100%;
          margin-left: 20rpx;
        }
      }
    }

    .footer {
      width: 600rpx;
      display: flex;
      align-items: center;
      flex-direction: column;

      .title-tips {
        font-size: $uni-font-size-sm;
        margin-top: $uni-spacing-row-lg;
        color: $uni-color-warning;
      }

      .btn {
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        font-size: $uni-font-size-28-rpx;
        background-color: $uni-bg-color-btn;
        margin-top: 20rpx;
      }

      .login-btn {
        color: white;
        margin-top: $uni-spacing-row-lg;
      }

      .login-protocol {
        font-size: $uni-font-size-24-rpx;
        display: flex;
        white-space: nowrap;
        align-items: center;
        color: $uni-text-color-grey;
        margin-top: $uni-spacing-row-lg;

        .service-protocol {
          color: $uni-color-primary;
        }

        .privacy-agreement {
          color: $uni-color-primary;
        }
      }

      .quick {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 80rpx;

        .quick-title {
          font-size: $uni-font-size-26-rpx;
          color: $uni-text-color-disable;
        }

        .quick-box {
          background: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          line-height: 30rpx;
          font-size: $uni-font-size-24-rpx;
          box-sizing: border-box;

          .quick-img {
            width: 60rpx;
            height: 60rpx;
            margin-top: $uni-space-default-40;
          }

          .quick-text {
            margin-top: 10rpx;
          }
        }

        .quick-box::after {
          border: none;
        }
      }
    }
  }
}

.service-protocol {
  color: $uni-color-primary;
}

.privacy-agreement {
  color: $uni-color-primary;
}
</style>
